<template>
  <div class="dict-tabs">
    <a-tabs v-model:activeKey="activeKey" :animated="false" class="tabs-wrap">
      <a-tab-pane key="synonym" tab="同义词">
        <SynonymLibraryTab />
      </a-tab-pane>

      <a-tab-pane key="sensitive" tab="敏感词库">
        <SensitiveLexiconTab />
      </a-tab-pane>

      <a-tab-pane key="forbidden" tab="禁查词">
        <ForbiddenTermsTab />
      </a-tab-pane>

      <!-- <a-tab-pane key="linkDeletionManagement" tab="链接删除管理">
        <LinkDeletionManagement />
      </a-tab-pane> -->

      <a-tab-pane key="stopwords" tab="停用词">
        <StopwordListTab />
      </a-tab-pane>

      <a-tab-pane key="customWordSegmentation" tab="自定义分词">
        <CustomWordSegmentation />
      </a-tab-pane>

      <a-tab-pane key="segmentDic" tab="分词词典">
        <SegmentationDictionaryTab />
      </a-tab-pane>

      <a-tab-pane key="correction" tab="纠错词">
        <SpellingCorrectionTab />
      </a-tab-pane>

      <a-tab-pane key="associate" tab="联想词库">
        <AssociationLexiconTab />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, provide, type InjectionKey, type Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 同义词
import SynonymLibraryTab from './SynonymLibraryTab/index.vue'
// PX7BK22敏感词库
import SensitiveLexiconTab from './SensitiveLexiconTab/index.vue'
// DYY17停用词
import StopwordListTab from './StopwordListTab/index.vue'
// 0禁查词
import ForbiddenTermsTab from './ForbiddenTermsTab/index.vue'
// 0DYY1分词词典
import SegmentationDictionaryTab from './SegmentationDictionaryTab/index.vue'
// DYY14PX7纠错词
import SpellingCorrectionTab from './SpellingCorrectionTab/index.vue'
// BK79联想词库
import AssociationLexiconTab from './AssociationLexiconTab/index.vue'
// 链接删除管理
// import LinkDeletionManagement from './LinkDeletionManagement/index.vue'
// 自定义分词
import CustomWordSegmentation from './CustomWordSegmentation/index.vue'

// 常量数组 //
const TABS = [
  'synonym',
  'sensitive',
  'stopwords',
  'customWordSegmentation',
  'forbidden',
  'segmentDic',
  'correction',
  'associate',
  // 'linkDeletionManagement',
] as const
type TabKey = typeof TABS[number]

const isValidTab = (v: unknown): v is TabKey =>
  typeof v === 'string' && (TABS as readonly string[]).includes(v)

// 路由对象
const route = useRoute()
const router = useRouter()

// 当前激活 tab
const activeKey = ref<TabKey>('synonym')

const DICT_ACTIVE_TAB: InjectionKey<Ref<TabKey>> = Symbol('DICT_ACTIVE_TAB')
provide(DICT_ACTIVE_TAB, activeKey)

function syncTabToUrl(tab: TabKey, replace = true) {
  const curTab = route.query.tab as string | undefined
  if (curTab === tab) return
  const q = { ...route.query, tab }
  if (replace) router.replace({ path: route.path, query: q })
  else router.push({ path: route.path, query: q })
}

onMounted(() => {
  const t = route.query.tab as string | undefined
  if (isValidTab(t)) {
    activeKey.value = t
  } else {
    syncTabToUrl(activeKey.value, true)
  }
})

// 监听路由
watch(
  () => route.query.tab,
  (t) => {
    if (isValidTab(t) && t !== activeKey.value) {
      activeKey.value = t
    }
  }
)

// 监听本地状态
watch(
  activeKey,
  (k) => {
    if ((route.query.tab as string) !== k) {
      syncTabToUrl(k, true)
    }
  },
  { immediate: false }
)
</script>

<style lang="scss" scoped>
.dict-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  min-height: 60dvh;
  overflow: hidden;
}

.tabs-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;

  :deep(.ant-tabs) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  :deep(.ant-tabs-nav) {
    margin: 0 0 12px 0;
    flex: 0 0 auto;
  }

  /* 可滚动的内容容器 */
  :deep(.ant-tabs-content-holder) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* 屏幕缩小时出现纵向滚动条 */
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }

  :deep(.ant-tabs-tabpane) {
    height: 100%;
    display: block;
  }

  :deep(.pane-title) {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
  }

  :deep(.pane-body) {
    color: #555;
    line-height: 1.7;
  }
}

/* 小屏适配：减小内边距与间距 */
@media (max-width: 768px) {
  .tabs-wrap {
    padding: 8px;
    border-radius: 6px;

    :deep(.ant-tabs-nav) {
      margin-bottom: 8px;
    }
  }
}
</style>

<!-- <style lang="scss" scoped>
.dict-tabs {

}

.tabs-wrap {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;

  :deep(.ant-tabs-nav) {
    margin: 0 0 12px 0;
  }

  :deep(.pane-title) {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
  }

  :deep(.pane-body) {
    color: #555;
    line-height: 1.7;
  }
}
</style> -->
